<template>
    <div class="main">
        <Nav>
            <div slot="left" @click="goBack">&lt;</div>
            <div slot="center">专业题库</div>
            <div slot="right" >···</div>
        </Nav>
        <div class="top">
            <div class="text">
                <div class="result">本次答题结果:</div>
                <div class="questioncount">·共<span>{{ questioncounts }}</span>道</div>
                <div class="questiontrue">·答对<span>{{ questiontrue }}</span>道</div>
                <div class="questionfalse">·答错<span>{{ questionfalse }}</span>道</div>
            </div>
        </div>
        <div class="middle"><img src="@/assets/images/base-images/形状 1.png" alt=""></div>
        <div class="bottom">
                <div class="btn" @click="sure">确定</div>
                <div class="again" @click="again">再来一次</div>
        </div>
    </div>
</template>

<script>
import Nav from '@/components/common/Nav.vue';
    export default {
        data() {
            return {
                questioncount: 0,
            }
        },
        components: {
            Nav,
        },
        mounted () {
            // const that = this
            
            // this.$bus.$on("questioncount",(count)=>{
            // console.log("更改前"+count);
            // this.questioncount = count;
            // console.log("更改后"+this.questioncount);

            // console.log(that.questioncount === this.questioncount);
            // })

        },
        computed: {
            // 使用vuex
            questioncounts(){
                return this.$store.state.questioncounts
            },
            questiontrue() {
                return this.$store.state.count 
            },
            questionfalse(){
                return this.questioncounts - this.questiontrue
            }
        },
        methods: {
            goBack() {
                this.$router.push('/problems')
            },
            sure(){
                this.$router.push('/problems')
            },
            again(){
                this.$store.commit('resetCount')
                this.$router.go(-1)
            }
        },
    }
</script>

<style scoped>
/* .main{
    background-image: url('../../../assets/images/base-images/专业题库-背景.png');
    background-repeat: no-repeat;
    background-size: cover;
} */
.text{
    margin-top:135px;
    margin-left: 25px;
}
.top{
    height: 250px;
    margin-top: 64px;
    color: #121737;
    /* background:linear-gradient(to right, #f3f2f7 0%,#f7f8fc 100%); */
}
.top .result{
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 35px;
}
.top .questiontrue span{
    color: #10b863;
}
.top .questionfalse span{
    color: #da3c3b;
}
.questioncount,.questiontrue,.questionfalse{
    font-size: 17px;
    font-weight: 550;
    margin-bottom: 14px;
}
.top span{
    font-size: 27px;
}
.middle img{
    width: 375px;
    height: 65px;
}
.bottom .btn{
    font-size: 16px;
    height: 50px;
    width: 325px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 25px;
    background: linear-gradient(to right, #1fcbcf 0%,#0484c3 100%);

}
.again{
    text-align: center;
    font-size: 14px;
    color: #13153c;
    margin-top: 20px;
}
</style>